<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css">
    <link href="/css/common.css" rel="stylesheet" type="text/css">
    <link href="/css/info.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="info" id="info">
        <div class="header">
            <div>
                <p class="banner"><span @click="toOther(info.role ? '/admin' : '/master')">社区空间</span><span @click="toOther('/index')">聊天室</span><span @click="toOther('/search')">用户</span></p>
                <div class="name" @click="toOther('/info')"><img :src="info.picture"/><span>{{info.nick}}</span></div>
            </div>
        </div>
        <div class="info-conent">
            <div class="content">
                <div class="info-title"> <img src="/images/info.png"/><span>我的资料</span></div>
                <ul class="inputs">
                    <li> <span>用户名:</span><div><span v-if="!isEdit">{{info.username}}</span> <input v-if="isEdit" disabled v-model="info.username"/></div></li>
                    <li> <span>头像:</span><div><img :src="info.picture"/><button class="edit" @click="inputClick" v-if="isEdit">修改</button>
                        <form id="uploadForm" enctype="multipart/form-data">
                            <input :value="value" id="typeInput" @change="upload" accept="image/*" hidden name="file" type="file"/>
                        </form>

                    </div></li>
                    <li> <span>性别:</span><div><span v-if="!isEdit">{{info.sex}}</span><label v-if="isEdit">男：<input @click="changeSex(1)" type="radio" namae="sex" value="1" :checked="info.sex == 1"></label><label v-if="isEdit">女：<input type="radio" @click="changeSex(0)" namae="sex" value="0" :checked="info.sex == 0"></label></div></li>
                    <li v-if="isEdit"> <span>年龄:</span><div><input class="inputW" v-model="info.age"/></div></li>
                    <li v-if="!isEdit && info.age"> <span>年龄:</span><div><span>{{info.age}}</span></div></li>
                    <li v-if="isEdit"> <span>爱好:</span><div><input class="inputW" v-model="info.hoby"/></div></li>
                    <li v-if="!isEdit && info.hoby"> <span>爱好:</span><div><span>{{info.hoby}}</span></div></li>
                    <li> <span>昵称:</span><div><span v-if="!isEdit">{{info.nick}}</span><input class="inputW" v-if="isEdit"  v-model="info.nick"/></div></li>
                    <li> <span>邮箱:</span><div><span v-if="!isEdit">{{info.email}}</span><input class="inputW" v-if="isEdit" v-model="info.email"/></div></li>
                    <li> <span>密码:</span><div><span v-if="!isEdit">{{info.password}}</span><input class="inputW" v-if="isEdit"  v-model="password"/></div></li>
                    <li> <span>个人描述:</span><div><span v-if="!isEdit">{{info.selfDesc ? info.selfDesc : '暂无'}}</span><textarea  v-model="info.selfDesc" v-if="isEdit"></textarea></div></li>
                    <li><span></span><div><button @click="change">{{isEdit ? '保存' : '编辑'}}</button></div></li>
                </ul>
                <div class="goout">
                    <button @click="goOut">退出</button>
                </div>
            </div>
        </div>

        <!-- <div class="footer"></div> -->
    </div>
    <script src="/tools/vue.js"></script>
    <script src="/tools/http.js"></script>
    <script src="/js/jquery-1.12.3.min.js"></script>
    
    <script>
        new Vue({
            el: '#info',
            data() {
                return {
                    info: {
                         nick: '',
                         picture: '',
                         email: '',
                         selfDesc: '',
                         staffId: '',
                         role: '',
                         sex: '1',
                         age: ''
                     },
                     password: '',
                    isEdit: false,
                    show:false,
                    value: '',
                    status:0,
                }
            },
            created() {
                this.getInfo();
            },
            methods: {
                upload() {
                    var that = this;
                    var formData = new FormData($('#uploadForm')[0]);
                    console.log(formData)
                    $.ajax({
                        type: 'post',
                        url: '/uploadFile',
                        data: formData,
                        cache: false,
                        processData: false,
                        contentType: false,
                    }).success(function (data) {
                        that.info.picture = data.data
                    }).error(function (e) {
                        console.log(e)
                    })
                },
                changeSex(value) {
                    info.sex = value;
                },
                toOther(url) {
                    if(this.status == 0){
                        window.location.href= url
                    }else{
                        if(url == '/index'){
                            alert("账户被禁用，无法进行聊天")
                        }else{
                            window.location.href= url
                        }

                    }
                },
                inputClick() {
                    this.$nextTick(() => {
                        document.getElementById('typeInput').click();
                    })
                },
                changeInput(e) {
                    var file = event.target.files[0];
                    console.log(file,event.target.files,e, 231)
                    ajax({
                        type: 'post',
                        url: '/uploadFile',
                        contentType:'multipart/form-data',
                        data: {
                            file
                        },
                        success(result){
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result);
                            // /info  /search   /master 主页
                            if(res.code == 200 ) {
                               
                            }
                        }
                    })

                },
                change() {
                    //保存
                    if(!this.isEdit) {
                        this.isEdit = !this.isEdit;
                        return
                    }
                    let that = this
                    if(this.password) {
                        this.info.password = this.password;
                    }
                    //编辑保存
                    ajax({
                        type: 'post',
                        url: '/updateStaff',
                        contentType: 'application/json;charset=UTF-8',
                        data: that.info,
                        success(result) {
                            let res = JSON.parse(result);
                            if(res.code == 200 ) {
                                that.isEdit = !that.isEdit;
                            }
                        }
                    })
                },
                getInfo() {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/myInfo',
                        success(result){
                            let res = JSON.parse(result);
                            if(res.code == 200 ) {
                                console.log(res.data.sex, 'sex')
                                that.info.role = res.data.role ? true : false;
                                that.info['sex'] = res.data.sex == 1 ? '1' : '0';
                                that.sex = res.data.sex ? '男' : '女';
                                that.info = res.data;
                                that.status = res.data.status
                                that.info.picture = res.data.picture ? res.data.picture : '/images/people.png';
                            }
                        }
                    })
                 },
                 goOut() {
                     window.location.href ="/logout"
                 }
            }
          
        })
    </script>
</body>

</html>